<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib  prefix="c" uri="http://java.sun.com/jstl/core_rt" %>
<!DOCTYPE HTML>
<html>
	<head>
		<base href="${pageContext.request.contextPath}/">
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>用户管理 - 新建用户</title>
        <link rel="shortcut icon" href="favicon.ico">
        <link href="resource/admin/css/bootstrap.min.css?v=3.3.6" rel="stylesheet">
        <link href="resource/admin/css/font-awesome.css?v=4.4.0" rel="stylesheet">
        <link href="resource/admin/css/plugins/iCheck/custom.css" rel="stylesheet">
        <link href="resource/admin/css/animate.css" rel="stylesheet">
        <link href="resource/admin/css/style.css?v=4.1.0" rel="stylesheet">
    </head>
    <body class="gray-bg">
        <div class="wrapper wrapper-content">
                <!-- 定义行数 -->
                <div class="row">
                    <!-- 定义列数 -->
                    <div class="col-md-12">
                        <div class="ibox float-e-margins">
                            <!-- 定义标题 -->
                            <div class="ibox-title">
                                <h5>系统用户管理 <small>新建用户资料信息</small></h5>
                            </div>
                            <!-- 定义内容 -->
                            <div class="ibox-content">
                                <form method="post" class="form-horizontal" action="sys/user/add" id="userForm">
                                    <div class="form-group">
                                        <label class="col-sm-2 control-label">账号</label>
                                        <div class="col-sm-4">
                                            <input type="text" name="account" id="account" required="" class="form-control" autofocus>

                                        </div>
                                        <div class="col-sm-6">
                                            <span class="help-block m-b-none text-success">请输入唯一的账号信息,需要使用Ajax验证</span>
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <label class="col-sm-2 control-label">密码</label>
                                        <div class="col-sm-4">
                                            <input type="text" name="password" id="password" class="form-control" readonly="readonly" value="123456">

                                        </div>
                                        <div class="col-sm-6">
                                            <span class="help-block m-b-none text-success">初始化密码123456,需要加密处理!</span>
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <label class="col-sm-2 control-label">姓名</label>
                                        <div class="col-sm-4">
                                            <input type="text" name="user_name" id="user_name" class="form-control">

                                        </div>
                                        <div class="col-sm-6">
                                            <span class="help-block m-b-none text-success"></span>
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <label class="col-sm-2 control-label">角色</label>
                                        <div class="col-sm-4">
                                            <select class="form-control m-b" name="role_id" id="role_id">
                                                <option value="">请选择要分配的角色</option>
                                                <c:forEach items="${requestScope.roleList }" var="role">
                                                    <option value="${role.role_id }">${role.role_name }</option>
                                                </c:forEach>
                                            </select>

                                        </div>
                                        <div class="col-sm-6">
                                            <span class="help-block m-b-none text-success"></span>
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <label class="col-sm-2 control-label">状态</label>
                                        <div class="col-sm-4">
                                            <div class="checkbox i-checks">
                                                <label>
                                                    <input type="radio" name="status" value="1" checked="checked"> <i></i> 激活
                                                </label>

                                                <label>
                                                    <input type="radio" name="status" value="2" > <i></i> 禁用
                                                </label>
                                            </div>

                                        </div>
                                        <div class="col-sm-6">
                                            <span class="help-block m-b-none text-success"></span>
                                        </div>
                                    </div>
                                    <div class="hr-line-dashed"></div>
                                    <div class="form-group">
                                        <div class="col-sm-4 col-sm-offset-2">
                                            <button class="btn btn-primary" type="submit">保存</button>
                                            <button class="btn btn-default" type="reset">取消</button>
                                            <button class="btn btn-white" type="button" onclick="javascript:history.back()">返回</button>
                                        </div>
                                    </div>
                                </form>
                            </div>
                        </div>
                    </div>
                </div>
        </div>

        <!-- 全局js -->
        <script src="resource/admin/js/jquery.min.js?v=2.1.4"></script>
        <script src="resource/admin/js/bootstrap.min.js?v=3.3.6"></script>

        <!-- 自定义js -->
        <script src="resource/admin/js/content.js?v=1.0.0"></script>
        
        <!-- 引入jquery的插件验证框架 -->
        <script src="resource/admin/js/plugins/validate/jquery.validate.min.js"></script>
        <script src="resource/admin/js/plugins/validate/messages_zh.min.js"></script>
        <!-- 错误提示的自定义样式 -->
        <script src="resource/admin/js/plugins/validate/validation.js"></script>
        
        <!-- iCheck -->
        <script src="resource/admin/js/plugins/iCheck/icheck.min.js"></script>
        <script>
            $(document).ready(function () {
                $('.i-checks').iCheck({
                    checkboxClass: 'icheckbox_square-green',
                    radioClass: 'iradio_square-green',
                });
            });
        </script>
        <script type="text/javascript">
        $(function(){
            var icon = "<i class='fa fa-times-circle'></i> ";
            $("#userForm").validate({
                rules:{
                    account:{
                        required:true,
                        rangelength:[3,16],
                        remote:{
                            url:"sys/user/valid/account",
                            type:"get",
                            data:{//要传递的数据
                                account: function() {
                                    return $("#account").val();
                                }
                            },
                            //dataType:"json",//JSON字符串转换为JavaScript对象,就是处理data参数
                            dataFilter:function(data){//data接收服务端返回的数据 true或者false
                                data = JSON.parse(data);
                                return data.flag;
                                //return true或者false
                            }
                        }
                    },
                    user_name:{
                    	required:true,
                        rangelength:[1,5]
                    },
                    role_id:{
                    	required:true,
                    }
                },
                messages:{
                    account:{
                        required:icon+"请输入账号",
                        rangelength:icon+"您输入的账号的长度应该在3到16位之间",
                        remote:icon+"该账号已经被注册！"
                    },
                    user_name:{
                    	required:icon+"请输入用户姓名",
                        rangelength:icon+"您输入的账号的长度应该在1到5位之间"
                    },
                    role_id:{
                        required:icon+"请选择角色"
                    }
                },
                onfocusout:false,
                onkeyup:false
            });
        });
        </script>
    </body>
</html>